<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css样式学习-派生选择器-id选择器-类选择器-属性选择器</title>
    <style>
        /* 派生选择器：通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。 */
        li strong{
            font-style: italic;
            font-weight: normal;
        }

        strong{color:red;}
        h2{color: red;}
        h2 strong{color:blue;}

        /* id选择器 */
        #red{color: red;}
        #green{color: green;}
        #sidebar p{
            font-style: italic;
            color: sandybrown;
            text-align: right;
            margin-top: 0.5em;
        }
        #sidebar h3 {
            font-size: 1em;
            font-weight: normal;
            font-style: italic;
            margin: 0;
            line-height: 1.5;
            text-align: right;
        }
        #sidebar {
            border: 1px dotted #000;
            padding: 10px;
        }
        div#sidebar{
            border:1px dotted #000;
            padding:10px;
        }
        /* 类选择器 */
        .center{text-align: center;}
        .fancy td{
            text-align: ri;
        }
        .fancy td{
            color: #f60;
            background:#666;
            text-align: right;
        }
        td.fancy {
            color: #f60;
            background: rgb(76, 216, 11);
        }
        /* 类选择器建立的派生选择器，类选择器名称.派生选择器（紧挨.的是class name 派生选择器必须包裹内容，内容才能生效） */
         /* <h3 class="test1"><test2>只有这种样式会生效</test2></h3> */
         .test1 test2{
            color: #f60;
            background:#666;
        }
        /* 派生选择器.类选择器名称（紧挨.的是class name 派生选择器必须包裹内容，内容才能生效） */
        /* <test3 class="test4">只有这种样式会生效</test3>  */
        test3.test4 {
            color: #f60;
            background: rgb(76, 216, 11);
        }
        /* 属性选择器 */
        [title]{
            color:red;
        }
        [title=shuangshuang]{
            border: 5px solid blue;
        }
        [title~=hello]{
            text-align: right;
            font-style: italic;
        }
        [lang |=gggg]{
           text-align:center;
        }
        [lang |=shuang]{
           text-align:center;
        }

        input[type="text"]{
            width:150px;
            display:block;
            margin-bottom:10px;
            background-color:yellow;
            font-family: Verdana, Arial;
        }

        input[type="button"]{
            width:120px;
            margin-left:35px;
            display:block;
            font-family: Verdana, Arial;
        }
    </style>
</head>
<body>
    <strong>this is strong</strong>
    <li>this is <strong> italic </strong></li>
    <li>this is normal font</li>

    <p>the stronglt emphasized word in this paragraph is <strong>red</strong></p>
    <h2>this subhead is also red</h2>
    <h2>the strongly emphasized word in this subhead id <strong>blue</strong></h2>

    <p id="red">this paragraph is red</p>
    <p id="green">this paragraph is green</p>
    <sidebar id="sidebar"><p>这是id选择器建立的派生选择器</p></sidebar>
    <sidebar id="sidebar"><h3>这是id选择器建立的派生选择器 h3</h3></sidebar>
    <p id="sidebar">id 为sidebar的元素将拥有一个像素宽的黑色点状边框，并且padding=10px</p>

    <h1 class="center">this heading will be center-aligned</h1>
    <p class="center">this paragraph will also be center-aligned</p>
    <!-- 类选择器建立的派生选择器   fancy和td的组合选择器，必须在表格内使用 -->
    <table class="fancy"><td>（.fancy td有效果）</td></table>
    <table><td class="fancy">(td.fancy 有效果)</td></table>
    <h3 class="test1"><test2>.test1 test2 只有这种样式会生效</test2></h3>
    <test3 class="test4">test3.test4 只有这种样式会生效</test3>

    <p title="shuangshuang">属性选择器</p>
    <p title="hello world">为包含指定值的 title 属性的所有元素设置样式。</p>
    <p title="hello -ooo ">适用于由空格分隔的属性值</p>
    <p lang="gggg-ggg">为带有包含指定值的 lang 属性的所有元素设置样式</p>
    <p lang="shuang-shuang-ss ">适用于由连字符分隔的属性值,lang属性值应该在开头</p>
    <form name="input" action="" method="get"></form>
        <input type="text"  name="Name" value="Bill" size="20">
        <input type="text" name="Name" value="Gates" size="20">
        <input type="button" value="Example Button">
    </form>
</body>
</html>